<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch Data Example</title>
</head>
<body>
  <div id="poemList">
    <!-- Placeholder for displaying fetched data -->
  </div>

  <script>
    async function fetchData() {
      try {
        const response = await fetch('http://localhost:5000/get_data');
        const jsonData = await response.json();
        displayData(jsonData.data); // Assuming the response has a 'data' field
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    function displayData(data) {
      const poemList = document.getElementById('poemList');
      poemList.innerHTML = ''; // Clear previous content
      
      data.forEach(poem => {
        const poemElement = document.createElement('div');
        poemElement.innerHTML = `
          <h3>${poem.poem_name}</h3>
          <p><strong>ID:</strong> ${poem.ID}</p>
          <p><strong>Dynasty:</strong> ${poem.poem_dynasty}</p>
          <p><strong>Author:</strong> ${poem.poem_author}</p>
          <p><strong>Topics:</strong> ${poem.topics.join(', ')}</p>
          <hr>
        `;
        poemList.appendChild(poemElement);
      });
    }

    fetchData();
  </script>
</body>
</html>
